<template>
  <div class="container">
    <slide-tab @onTab="tabClick" :top="1.08">
      <div class="tabItem">
        <ul class='tabClick box'>
          <li class="active">全部</li>
          <li>草稿</li>
          <li>审批中</li>
          <li>待报销</li>
          <li>已报销</li>
        </ul>
        <div class='lineBorder'>
          <div class='lineDiv' :style="{width: `${100/5}%`}"><!--滑动条--></div>
        </div>
      </div>
      <div class='tabCon'>
        <div class='tabBox'>
          <div v-for="(item1, index1) in list" :value="item1" :key="index1"  class='tabList'>
            <empty :show="item1.length === 0"></empty>
            <div @click="xinCenDetail(item)" v-for="(item, index) in item1" :value="item" :key="index" class="item-content">
              <div class="info box card-linear1">
                <div class="from box-ver box box-ac">
                  <div class="area">{{item.from}}</div>
                  <div class="">{{item.startDate}}</div>
                </div>
                <div class="box center box-f1 box-ver box-ac box-jc">
                  <div class="icon icon-arrow-two"></div>
                  <div class="">(共{{item.countDateNum + 1}}天)</div>
                </div>
                <div class="from box-ver box box-ac">
                  <div class="area">{{item.to}}</div>
                  <div class="">{{item.endDate}}</div>
                </div>
              </div>
              <div class="person tc-333 ell" v-html="item.travelPersonShow" >
              </div>
              <div class="box box-ac bot-line">
                <div class="cause tc-888 box-f1 ell">{{item.cause}}</div>
                <div :style="{'background-color': Fstate(item.state, 'color')}" class="status">{{item.state | Fstate('name')}}</div>
              </div>
              <div v-if="index1 === 3 && countDate(item) >= 0" class="tc-main tips-sixiao">距离失效还有{{countDate(item)}}天</div>
              <!-- <div v-if="isDaiBaoXiao(item)" class="icon icon-status icon-status-60"></div> -->
            </div>
          </div>
        </div>
      </div>
    </slide-tab>
  </div>
</template>

<script>
import slideTab from '@/components/slideTab.vue'
import { formatDate, Fstate } from '@/assets/js/filters'
import { filterList, countDate } from '@/assets/js/common'
import { getEvectionReqBills } from '@/assets/js/api'
import { mapState } from 'vuex'
import empty from '@/components/empty.vue'
export default {
  name: 'xinCenList',
  components: {
    empty,
    slideTab
  },
  data () {
    return {
      travelList: [],
      list: [ [], [], [], [], [] ],
      now: formatDate(new Date(), 'yyyy-MM-dd')
    }
  },
  computed: {
    ...mapState(['userNum'])
  },
  mounted () {
    this.getEvectionReqBills()
  },
  methods: {
    Fstate (state, key) {
      return Fstate(state, key)
    },
    countDate (item) {
      let limit = 90
      let count = countDate(this.now, item.createtime.split(' ')[0])
      let count1 = Math.floor(limit - count)
      if (Number(item.state) === 60 && count1 >= 0) {
        return count1
      } else {
        return -1
      }
    },
    isDaiBaoXiao (item) {
      return (item.state && (+item.state) === 60 && countDate(this.now, item.createtime.split(' ')[0]) < 90)
    },
    tabClick (index) {
      console.log(index)
    },
    xinCenDetail (item) {
      // console.log(item)
      localStorage.setItem('billname', '出差申请单')
      localStorage.setItem('cause', item.cause)
      localStorage.setItem('state', item.state)
      localStorage.setItem('money', item.amount)
      window.open(`${this.$config.url.travelbilldetail}?billNum=${item.number}`)
    },
    getEvectionReqBills () {
      if (localStorage.getItem('getEvectionReqBills')) {
        this.initList(JSON.parse(localStorage.getItem('getEvectionReqBills')))
        setTimeout(() => {
          this.$store.commit('isLoading', false)
        }, 10)
      }
      getEvectionReqBills({
        userNum: this.userNum,
        startDay: JSON.stringify(['2017-01-01', '2030-01-01'])
      }, list => {
        localStorage.setItem('getEvectionReqBills', JSON.stringify(list))
        this.initList(list)
      })
    },
    initList (data) {
      this.travelList = data.map(item => {
        let travelPersonShow = item.travelPerson.join(`<span class="tc-999"> | </span>`)
        let countDateNum = countDate(item.endDate, item.startDate)
        item.travelPersonShow = travelPersonShow
        item.countDateNum = countDateNum
        return item
      })
      let list = [
        this.travelList,
        filterList(this.travelList, { state: [20, 25] }),
        filterList(this.travelList, { state: [145] }),
        this.travelList.filter(item => {
          return (item.state && (+item.state) === 60 && countDate(this.now, item.createtime.split(' ')[0]) < 90)
        }),
        // 下游关联过差旅报销单的出差行程   状态对应值：已关闭或审核通过（不在有效期内）   对应值：80   60   审核通过的可进行关闭行程  已关闭的不能操作
        this.travelList.filter(item => {
          return (
            (Number(item.state) === 60 && countDate(this.now, item.createtime.split(' ')[0]) >= 90) ||
            Number(item.state) === 80
          )
        })
      ]
      this.list = list
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/config";
@import "../assets/css/mixins";
.tabList{
  padding-top:1.08rem !important;
}
.item-content{
  background-color:#FFF;
  position: relative;
  font-size:.26rem;
  margin: 0 .5rem;
  margin-bottom:.25rem;
  color:#333;
  border-radius:.2rem;
  overflow: hidden;
  .info{
    padding:.1rem .3rem .3rem .3rem;
    color:#FFF;
  }
  .area{
    font-size:.42rem;
    padding: .2rem 0;
  }
  .icon-arrow-two{
    width:.5rem;
    height:.5rem;
    margin-top:.2rem;
    margin-bottom:.2rem;
    @include bg-image('../assets/images/icon-arrow-two-white');
  }
  .person{
    padding:.2rem .3rem;
    font-size:.3rem;
  }
  .bot-line{
    margin:0 .3rem;
    margin-bottom:.2rem;
  }
  .status{
    // border:1px solid #000;
    border-radius:.2rem;
    font-size:.22rem;
    color:#FFF;
    padding:.05rem .1rem;
  }
  .tips-sixiao{
    border-top:1px solid $borderColor;
    padding:.2rem .3rem;
    font-size:.3rem;
  }
  // .icon-status{
  //   position:absolute;
  //   bottom:.2rem;
  //   right:.2rem;
  //   z-index:66;
  //   width:1rem;
  //   height:1rem;
  // }
  // .icon-status-60{
  //   @include bg-image('../assets/images/icon-status-60');
  // }
}
</style>
